<template>
	<el-dialog @close="closed" :title="$t('msg.excel.roleDialogTitle')" :model-value="modelValue">
		<el-checkbox-group v-model="userRoleTitleList">
			<el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.title"></el-checkbox>
		</el-checkbox-group>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closed">{{$t('msg.universal.cancel')}}</el-button>
				<el-button @click="onConfirm" type="primary">{{$t('msg.universal.confirm')}}</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		watch
	} from 'vue'

	import {
		roleList
	} from '@/api/role'

	import {
		watchSwitchLang
	} from '@/utils/i18n'

	import {
		ElMessage
	} from 'element-plus'

	import {
		useI18n
	} from 'vue-i18n'

	import {
		userRoles,
		updateRole
	} from '@/api/user-manage'

	const props = defineProps({
		modelValue: {
			type: Boolean,
			required: true
		},

		userId: {
			type: String,
			required: true
		}
	})

	const emits = defineEmits(['update:modelValue', 'updateRole'])

	const closed = () => {
		emits('update:modelValue', false)
	}


	const i18n = useI18n()
	const onConfirm = async () => {
		const roles = userRoleTitleList.value.map(title => {
			return allRoleList.value.find(role => role.title === title)
		})

		await updateRole(props.userId, roles)
		ElMessage.success(i18n.t('msg.role.updateRoleSuccess'))
		
		// 角色更新成功
		emits('updateRole')
		closed()
	}

	// 所有角色相关
	const allRoleList = ref([])

	const getListData = async () => {
		allRoleList.value = await roleList()
	}

	getListData()
	watchSwitchLang(getListData)

	// 当前用户角色
	const userRoleTitleList = ref([])

	const getUserRoles = async () => {
		const res = await userRoles(props.userId)

		userRoleTitleList.value = res.role.map(item => item.title)
	}

	watch(() => props.userId, val => {
		if (val) {
			getUserRoles()
		}
	})
</script>

<style lang="scss" scoped>
</style>
